import { request } from '@/api/request';
import { useAppSelector } from '@/redux/store';
import { useReactive } from 'ahooks';
import { Drawer } from 'antd';
import type { YmColumnType } from 'ym-design';
import { YmTable } from 'ym-design';
import { PackageDetail, PackageDetailPorps } from './Package/Detail';
// import { Breadcrumb } from 'antd';
// import OStyle from './index.less';
type TableRecord = {
  coursewareNum: number;
  createTime: string;
  modifyTime: string;
  resourceId: string;
  resourceName: string;
  isCharge?: number;
};

interface Props {
  pName?: string;
  cName?: string;
  classId?: string;
}
export default function ({ classId, pName, cName }: Props) {
  const { entId, organizationType } = useAppSelector((state) => state.loginEnt);
  const detailsPorps = useReactive<{ props?: PackageDetailPorps }>({});
  const columns: YmColumnType<TableRecord>[] = [
    {
      title: '课件包名称',
      dataIndex: 'resourceName',
      key: 'resourceName',
      width: 400,
    },
    {
      title: '时间',
      dataIndex: 'modifyTime',
      width: 120,
      key: 'modifyTime',
    },
    {
      title: '数量',
      dataIndex: 'coursewareNum',
      key: 'coursewareNum',
      width: 80,
    },
    {
      title: '类型',
      dataIndex: 'isCharge',
      key: 'isCharge',
      width: 80,
      hidden: organizationType === 1,
      render: (text, record) => <span>{text == 1 ? '收费' : '免费'} </span>,
    },
    {
      key: '_operate',
      title: '操作',
      width: 60,
    },
  ];

  return (
    <>
      <YmTable<TableRecord, { name?: string }>
        rowKey="resourceId"
        toolBar={false}
        searchForm={{
          formItems: [
            {
              label: '名称',
              name: 'name',
              valueType: {
                type: 'input',
                inputProps: {
                  autoComplete: 'off',
                },
              },
            },
          ],
        }}
        columns={columns}
        request={async (table, form) => {
          const { data } = await request<{ list: TableRecord[]; total: number }>('/safe/api/entPlatform/packageList', {
            params: {
              entId,
              classId: classId,
              ...form,
              pageNum: table.page?.pageIndex,
              pageSize: table.page?.pageSize,
            },
          });
          return data;
        }}
        operate={[
          {
            text: '详情',
            key: 'op',
            onClick(record) {
              console.log(record);
              detailsPorps.props = {
                guid: record.resourceId,
                name: record.resourceName,
                isCharge: record.isCharge,
                modifyTime: record.modifyTime || record.createTime,
              };
            },
          },
        ]}
      />
      <Drawer
        width={800}
        open={Boolean(detailsPorps.props)}
        destroyOnClose={true}
        title="详情"
        onClose={() => {
          detailsPorps.props = undefined;
        }}
      >
        <PackageDetail {...detailsPorps.props} />
      </Drawer>
    </>
  );
}
